<template>
  <div class="blog-list-box">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/admin/index',name:'AdminIndex'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>博客列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="searchForm" :model="searchForm">
      <el-row :gutter="20" style="margin-top: 50px">
        <el-col :span="20" :offset="2">
          <el-col :span="6">
            <el-form-item>
              <el-input placeholder="请输入搜索标题..." v-model="searchForm.title" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-select v-model="searchForm.categoryId" placeholder="请选择" style="width: 100%;" clearable>
                <el-option
                  v-for="item in categoryList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.categoryName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-select style="width: 100%;" clearable
                         v-model="searchForm.tagId"
                         placeholder="请选择文章标签">
                <el-option
                  v-for="item in tagList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-select style="width: 100%;" clearable
                         v-model="searchForm.flag"
                         placeholder="请选择文章标志">
                <el-option label="原创" value="原创"></el-option>
                <el-option label="翻译" value="翻译"></el-option>
                <el-option label="转载" value="转载"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="20" :offset="2">
          <el-col :span="6">
            <el-select style="width: 100%;" clearable
                       v-model="searchForm.admire"
                       placeholder="是否开启赞赏">
              <el-option label="开启" value="1"></el-option>
              <el-option label="关闭" value="0"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="resetForm"><i class="el-icon-refresh btn-icon"></i>重置</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="success" @click="getBlogList"><i class="el-icon-search btn-icon"></i>搜索</el-button>
          </el-col>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-top: 20px;">
      <el-col :span="22" :offset="1">
        <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="title"
            label="博客标题"
            width="300">
          </el-table-column>
          <el-table-column
          label="首图"
          width="100">
            <template slot-scope="scope">
              <el-image :src="scope.row.picture"></el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="博客标签"
            width="220">
            <template slot-scope="scope">
              <el-tag @close="delTag(item.id,scope.row.id)" closable v-for="item in scope.row.tagList" :key="item.id"
                      style="margin-left: 5px;">
                {{ item.tagName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="category.categoryName"
            label="博客分类"
            width="120">
          </el-table-column>
          <el-table-column
            label="置顶"
            width="200">
            <template slot-scope="scope">
              <el-switch
                @change="changeTop($event,scope.row)"
                v-model="scope.row.top"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-icon-class="iconfont icon-top top-status-icon"
                inactive-icon-class="iconfont icon-bottom bottom-status-icon"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="标志"
            prop="flag">
          </el-table-column>
          <el-table-column
            label="转载声明">
            <template slot-scope="scope">
              <span v-if="scope.row.shareStatement == 0">关闭</span>
              <span v-if="scope.row.shareStatement == 1">开启</span>
            </template>
          </el-table-column>
          <el-table-column
            label="访问次数">
            <template slot-scope="scope">
              {{ scope.row.views ? scope.row.views : 0 }}
            </template>
          </el-table-column>
          <el-table-column
            label="公开类型"
            width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.publicType == 0">草稿</span>
              <span v-if="scope.row.publicType == 1">公开</span>
              <span v-if="scope.row.publicType == 2">仅自己可见</span>
            </template>
          </el-table-column>
          <el-table-column
            label="赞赏"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.admire == 0">关闭</span>
              <span v-if="scope.row.admire == 1">开启</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            width="200">
            <template slot-scope="scope">
              <i class="el-icon-timer"></i>
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="更新时间"
            width="200">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span>{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button @click="edit(scope.row.id)" type="success" size="mini">编辑</el-button>
              <el-button @click="deleteBlog(scope.row.id)" type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 20px;"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="searchForm.current"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="searchForm.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "BlogList",
  data() {
    return {
      searchForm: {
        flag: "",
        title: "",
        categoryId: "",
        tagId: "",
        admire: "",
        current: 1,
        size: 10
      },
      tagList: [],
      categoryList: [],
      tableData: [],
      total: 0
    }
  },
  created() {
    this.getTagList();
    this.getCategoryList();
    this.getBlogList();
  },
  methods: {
    delTag(tagId, blogId) {
      this.$confirm("确定删除该博客得这个标签吗？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$del(this.$api.DELETE_TAG_BLOG_BIND + `/${tagId}/${blogId}`, {}).then(res => {
          if (res.data.code == 200) {
            this.$notify.success(res.data.message);
            this.getBlogList();
          }
        })
      }).catch(() => {
        this.$notify.info("取消删除");
      })
    },
    sizeChange(size) {
      this.searchForm.size = size;
      this.getBlogList();
    },
    currentChange(current) {
      this.searchForm.current = current;
      this.getBlogList();
    },
    resetForm() {
      let current = this.searchForm.current;
      let size = this.searchForm.size;
      this.searchForm = {
        flag: "",
        title: "",
        categoryId: "",
        tagId: "",
        admire: "",
        current: 1,
        size: 5
      };
      this.searchForm.current = current;
      this.searchForm.size = size;
    },
    changeTop(status, data) {
      this.$post(this.$api.UPDATE_BLOG_URL, {
        top: status,
        id: data.id,
        userId: this.$store.getters.getUserInfo.id
      }).then(res => {
        if (res.data.code == 200) {
          this.$notify.success(res.data.message);
        }
      })
    },
    edit(id) {
      this.$router.push({
        path: "/admin/blog/save",
        name: "BlogSave",
        params: {
          id
        }
      });
    },
    deleteBlog(id) {
      this.$confirm("此操作将永久删除该博客，确定要继续吗？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$del(this.$api.BLOG_DELETE_URL + `/${this.$store.getters.getUserInfo.id}/${id}`, {}).then(res => {
          if (res.data.code == 200) {
            this.$notify.success(res.data.message);
            this.getBlogList();
          }
        })
      }).catch(() => {
        this.$notify.info("取消删除");
      })
    },
    getBlogList() {
      this.searchForm.userId = this.$store.getters.getUserInfo.id;
      this.$get(this.$api.BLOG_LIST_URL, this.searchForm).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        }
      })
    },
    getCategoryList() {
      this.$get(this.$api.CATEGORY_LIST_URL + `/${this.$store.getters.getUserInfo.id}/1/100`, {}).then(res => {
        if (res.data.code == 200) {
          this.categoryList = res.data.data.records;
        }
      })
    },
    getTagList() {
      this.$get(this.$api.TAG_LIST_URL + `/${this.$store.getters.getUserInfo.id}/1/100`, {}).then(res => {
        if (res.data.code == 200) {
          this.tagList = res.data.data.records;
        }
      })
    },
  }
}
</script>

<style scoped>
.btn-icon {
  font-size: 16px;
  margin-right: 5px;
}
</style>
